/* eslint-disable react/jsx-no-duplicate-props */
import React, {Component} from 'react'
import MembersList from './MembersList'
import style from './Members.module.scss'
import moment from 'moment';
import {connect} from "react-redux";
import CreateUser from './component/CreateUser'
import RecommendList from './component/RecommendList'
import PushAllMsg from './component/PushAllMsg'
import {removeEmptyField} from '../compoent/emptyFild'


import {Button, DatePicker, Form, Input, InputNumber, message, Modal, Select} from 'antd';

const {RangePicker} = DatePicker;
const {Option} = Select;

class Members extends Component {

    state = {
        data: [],
        min: '',
        max: '',
        visible: false,
        recommend:false,
        msgAdd:false,
        date: [],
        id: '',
        newValues: {},
        status: [
            {
                id: 0,
                cname: '正常'
            },
            {
                id: 1,
                cname: '禁用'
            },

        ],
        sources: [
            {
                source: 1,
                desc: 'android'
            },
            {
                source: 2,
                desc: 'ios'
            },

        ],

    };

    onFinish = (values) => {
        //金额判断
        if (values.min) {
            const balance = values.min
            values.min = balance[0]
            values.max = balance[1]
        }
        if (this.state.min !== '' && this.state.max !== '') {
            values.min = this.state.min
            values.max = this.state.max
        }
        if ((this.state.min !== '' && this.state.max === "") || (this.state.max !== '' && this.state.min === '')) {
            return message.error('请指定正确的余额范围')
        }
        //
        //日期判断与转化
        if (values.minDate) {
            const minDate = values.minDate
            values.minDate = minDate ? moment(minDate[0]).format('YYYY-MM-DD') : ''
            values.maxDate = minDate ? moment(minDate[1]).format('YYYY-MM-DD') : ''
        }
        // values.maxDate = this.state.msax
        //this.search()


        //
        this.setState({data: values})
        if (values) {
            values.page = 1
            values.size = 10
            const newValues = removeEmptyField(values)
            this.setState({newValues: newValues})
            this.props.userList(newValues)
        } else {
            //
            this.props.userList({page: 1, size: 10})
        }
        //
    };
    onFinishFailed = (errorInfo) => {

    };
    onChange = (value) => {
        this.setState({min: value})

    };
    onChange1 = (value) => {
        this.setState({max: value})

    };
    createUser = () => {
        this.setState({
            visible: true
        })
    };
    recommendList = () => {
        this.setState({
            recommend: true
        })
    };

    pushAllMsg = () => {
        this.setState({
            msgAdd: true
        })
    };
    handleCancel = () => {
        this.setState({
            visible: false,
            recommend:false,
            msgAdd:false
        })
      /*  setTimeout(() => {
            this.props.homeData()

        }, 200);*/
    };

    render() {
        const {searchData, visible, status, newValues,recommend,sources,msgAdd} = this.state
       // const {homeInfo} = this.props

        return (
            <div >
                <div className={style.top} >
                    <Form
                        style={{marginTop: 20, marginLeft: 10}}
                        name="basic"
                        layout='inline'
                        labelCol={{span: 12}}
                        // wrapperCol={{ span: 6 }}
                        initialValues={{remember: true}}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                        autoComplete="off"
                        // initialValues={{
                        //   nikeName: '',
                        //   mobile: '',
                        //   id: '',
                        //   name: '',
                        //   minDate: '',
                        //   min:''
                        //   // nikeName: '',
                        // }}
                    >
                        <Form.Item
                            style={{width: 200}}
                            label="用户名"
                            name="nikeName"

                        >
                            <Input placeholder='请输入用户名查询'/>
                        </Form.Item>
                        <Form.Item
                            style={{width: 200}}
                            label="autoId"
                            name="autoId"
                        >
                            <Input placeholder='请输入autoId查询'/>
                        </Form.Item>
                        <Form.Item
                            style={{width: 200}}
                            label="ID"
                            name="id"
                        >
                            <Input placeholder='请输入ID查询'/>
                        </Form.Item>
                        <Form.Item
                            style={{width: 280}}
                            label="余额"
                            name='min'
                        >
                            <InputNumber
                                style={{width: 100}}
                                // defaultValue={0}
                                // formatter={value => ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                                // parser={value => value.replace(/\$\s?|(,*)/g, '')}
                                onChange={this.onChange}
                            />—
                            <InputNumber

                                style={{marginLeft: 1, width: 100}}
                                // defaultValue={0}
                                min={0}
                                // max={100}
                                // formatter={value => `${value}`}
                                // parser={value => value.replace}
                                onChange={this.onChange1}
                            />
                        </Form.Item>
                        <Form.Item
                            style={{width: 300}}
                            label="注册时间"
                            name="minDate"
                            // rules={[{ message: 'Please input your username!' }]}
                        >
                            <RangePicker
                                ranges={{
                                    // Today: [moment(), moment()],
                                    '本周': [moment().startOf('week'), moment().endOf('week')],
                                    '本月': [moment().startOf('month'), moment().endOf('month')],
                                }}/>

                        </Form.Item>
                        <Form.Item
                            style={{width: 200}}
                            label="状态"
                            name="status"

                            // rules={[{ message: 'Please input your username!' }]}
                        >
                            <Select
                                showSearch
                                placeholder='请选择订单状态'
                                // style={{ marginLeft:10}}
                                // placeholder=""

                            >
                                {status.map((item) => (
                                    <Option key={item.id} value={item.id}>
                                        {item.cname}
                                    </Option>
                                ))}
                            </Select>
                        </Form.Item>

                        <Form.Item
                            style={{width: 200 }}
                            label=" 设备商"
                            name="source"
                        >
                            <Select
                                showSearch
                                placeholder='请选择系统类型'
                            >
                                {sources.map((item) => (
                                    <Option key={item.source} value={item.source}>
                                        {item.desc}
                                    </Option>
                                ))}
                            </Select>
                        </Form.Item>

                        <Form.Item
                            style={{width: 200}}
                            label="手机号"
                            name="mobile"
                            // value={searchData}
                            onChange={e => this.setState({searchData: e.target.value})}
                        >
                            <Input placeholder='请输入手机号查询'/>
                        </Form.Item>

                        <Form.Item style={{marginLeft: 1200, marginTop: 20}}>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                            <Button type="primary" htmlType="reset" style={{marginLeft: 30}}>
                                重置
                            </Button>
                            <Button onClick={this.createUser} type="primary" style={{marginLeft: 30}}>
                                新增
                            </Button>
                        </Form.Item>
                    </Form>
                    <div className={style.mCount}>
                         <Button  onClick={() => this.recommendList()}   type="primary" >
                        推荐列表
                    </Button>

                        <Button  style={{marginLeft:20}} onClick={() => this.pushAllMsg()}   type="primary" >
                            消息群发
                        </Button>
                    </div>
                </div>
                <div className={style.middle}>
                    <MembersList searchData={searchData} newValues={newValues}/>
                </div>
                <Modal destroyOnClose visible={visible} title='新增' footer={null} onCancel={this.handleCancel}
                       handleCancel={this.handleCancel}>
                    <CreateUser handleCancel={this.handleCancel}></CreateUser>
                </Modal>

                <Modal destroyOnClose visible={recommend} title='超值推荐' width={1500}  footer={null} onCancel={this.handleCancel}
                       handleCancel={this.handleCancel}>
                    <RecommendList handleCancel={this.handleCancel} />
                </Modal>

                    <Modal destroyOnClose visible={msgAdd} title='个人消息推送' footer={null} onCancel={this.handleCancel} handleCancel={this.handleCancel}>
                        <PushAllMsg handleCancel={this.handleCancel}></PushAllMsg>
                    </Modal>


            </div>
        )
    }
}

const mapState = state => ({
    ...state.users

});

const mapDispatch = dispatch => ({
    ...dispatch.users
})

export default connect(mapState, mapDispatch)(Members);